<template>
  <div class="analysis">
    <div class="user-card">
      <div class="user-left">
        <img :src="Classroom.largePicture" alt/>
      </div>
      <div class="user-middle">
        <div class="middle-title">
          <i class="el-icon-user"/>
          <span>{{ Classroom.title }}</span>
        </div>
        <div class="user-phone">{{ Classroom.price }}</div>
        <div class="user-vip">
          <div class="vip-hint-box">
            <span>简介：</span>
            <span>{{ Classroom.about }}</span>
          </div>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane name="1" label="学员列表">
        <el-table
          :table-label="tableLabel"
          :table-data="studentList.slice((currentpage-1)*pagesize,currentpage*pagesize)"
          :header-cell-style="{background:'#eef1f6'}"
          border
          style="width: 100%"
        >
          <el-table-column slot="button" label="操作" :min-width="2" align="center">
            <template slot-scope="scope">
              <el-button type="primary" @click="showData(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :current-page="currentpage"
          :page-size="pagesize"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane name="2" label="学习记录">
        <el-table
          :table-label="learnLabel"
          :table-data="learningRecordsList.slice((learncurrentpage-1)*learnpagesize,learncurrentpage*learnpagesize)"
          :header-cell-style="{background:'#eef1f6'}"
          border
          style="width: 100%"
        >
        </el-table>
        <pagination
          :total="learntotal"
          :current-page="learncurrentpage"
          :page-size="learnpagesize"
          @handleSizeChange="learnHandleSizeChange"
          @handleCurrentChange="learnHandleCurrentChange"
        />
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="eduxcloudUserDialog" title="学员学习记录" width="50%">
      <el-form ref="recordsForm" :model="EduxcloudUser">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名">
              <span>{{ EduxcloudUser.name }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-table :data="EduxcloudUser.recordsList" border style="width:100%;margin-top:20px;">
          <el-table-column prop="currentTime" label="学习时长(S)" align="center"/>
          <el-table-column prop="actualViewingTime" label="实际观看时间(S)" align="center"/>
          <el-table-column prop="duration" label="视频时长(S)" align="center"/>
          <el-table-column prop="createTimeTimeStr" label="学习日期" align="center"/>
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="eduxcloudUserDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import ElTable from '@/components/Eltable'
  import { scrollTo } from '@/utils/scrollTo' // 上下滑动组件
  import Pagination from '@/components/Pagination' // 分页组件
  import { getClassroomDetail } from '@/api/subject/classroom' // 数据接口
  import { getLearningRecordsList } from '@/api/subject/course' // 数据接口

  export default {
    components: {
      ElTable,
      Pagination
    },
    data() {
      return {
        eduxcloudUserDialog: false,
        learningRecordsList: [],
        EduxcloudUser: { recordsList: [] },
        Classroom: {
          categoryId: null,
          title: '',
          price: '',
          students: [],
          studentIds: '',
          expiryMode: '',
          expiryValue: '',
          largePicture: ''
        },
        activeName: '1',
        userInfo: {},
        total: 0,
        currentpage: 1,
        pagesize: 10,
        tableLabel: [
          {
            label: '编号', width: '2', prop: 'id'
          }, {
            label: '用户名', width: '2', prop: 'name'
          }, {
            label: '昵称', width: '2', prop: 'nickName'
          }, {
            label: '电话', width: '2', prop: 'verifiedMobile'
          }, {
            label: '创建日期', width: '2', prop: 'createTimeStr'
          }
        ],
        studentList: [],
        learnLabel: [{
          label: '课程名称', width: '3', prop: 'courseName'
        }, {
          label: '用户名称', width: '2', prop: 'userName'
        }, {
          label: '学习时长(S)', width: '2', prop: 'currentTime'
        }, {
          label: '实际观看时间(S)', width: '2', prop: 'actualViewingTime'
        }, {
          label: '视频时长(S)', width: '2', prop: 'duration'
        }, {
          label: '学习日期', width: '2', prop: 'createTimeTimeStr'
        }
        ],
        learntotal: 0,
        learncurrentpage: 1,
        learnpagesize: 10
      }
    },
    created() {
      this.routerId = this.$route.params.ID
      console.log(this.routerId)
      if (this.routerId) {
        this.getClassRoomData(this.routerId)
      }
    },
    methods: {
      getClassRoomData(id) {
        getClassroomDetail(id).then(response => {
          this.Classroom = response.data.eduxcloudClassroom
          this.Classroom.students = []
          if (response.data.studentList) {
            console.log(response.data.studentList)
            this.studentList = response.data.studentList
            this.total = this.studentList.length
          }
          if (response.data.learningRecordsList) {
            console.log(response.data.learningRecordsList)
            this.learningRecordsList = response.data.learningRecordsList
            this.learntotal = this.learningRecordsList.length
          }
        })
      },
      showData(row) {
        let _this = this
        _this.eduxcloudUserDialog = true
        _this.EduxcloudUser.name = row.name
        getLearningRecordsList(row.id).then(res => {
          _this.EduxcloudUser.recordsList = res.data.items
          _this.EduxcloudUser.recordsList.map(item => {
            console.log('currentTime:' + item.currentTime)
          })
        })
      },
      handleSizeChange(val) {
        this.currentpage = 1
        this.pagesize = val.value
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleCurrentChange(val) {
        this.currentpage = val.value
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      learnHandleSizeChange(val) {
        this.learncurrentpage = 1
        this.learnpagesize = val.value
        if (this.learnpagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      learnHandleCurrentChange(val) {
        this.learncurrentpage = val.value
        if (this.learnpagesize >= 20) {
          scrollTo(50, 800)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .analysis {
    padding: 10px 20px 40px;

    .user-card {
      border: 1px solid #eee;
      box-shadow: 0 0 10px #bbbbbb;
      padding: 20px;
      display: flex;
      box-sizing: border-box;

      .user-left {
        img {
          width: 130px;
          height: 130px;
          margin-right: 20px;
        }
      }

      .user-middle {
        color: #666;
        padding: 20px 0;

        .middle-title {
          font-size: 18px;
          color: #353535;
        }

        .user-phone {
          margin: 20px 0;
        }

        .user-vip {
          display: flex;

          .vip-hint-box {
            margin-right: 30px;
          }
        }
      }

      .user-right {
        margin-left: auto;

        .user-btn {
          width: 110px;
          margin: 5px 0;
        }
      }
    }

    .class-nav {
      position: relative;
      padding: 10px;
      width: 100%;
      min-height: 40px;
      background-color: #f8f8f8;

      .class-title {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        padding-left: 7px;
        font-size: 16px;
        color: #353535;
        line-height: 20px;
      }

      .class-title::before {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        margin-right: 5px;
        content: '';
        display: inline-block;
        height: 14px;
        width: 2px;
        background-color: #2a75ed;
      }
    }
  }
</style>
